<!--
* @description  
* @fileName  1_天气案例监视属性
* @author zhoujunlin
* @date 2022-02-18 22:05:03
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_天气案例监视属性</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>今天天气很{{info}} {{x}}</h2>
        <!-- 绑定事件的时候 @xxx="yyy" yyy可以写一些简单的语句 
        比如下面两句功能相同  模板里面找数据是从vm内找，有些语句放入报错
        -->
        <button @click="isHot=!isHot;x++">切换天气</button>
        <button @click="changeWeather">切换天气</button>
        <hr>
        深度监视按钮：
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是：{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        {{numbers.c.d.e}}
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    isHot: true,
                    x: 0,
                    numbers: {
                        a: 1,
                        b: 1,
                        c: {
                            d: {
                                e: 100
                            }
                        }
                    }

                }
            },
            computed: { // 计算属性
                info() {
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: { // 方法
                changeWeather() {
                    this.isHot = !this.isHot
                    this.x++
                }
            },
            watch: { // 监测变化
                /* isHot:{
                    // 初始化时handler调用一次
                    immediate:true,
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue);
                    }
                }, */
                // 简写 不添加配置immediate deep时可以简写
                /* isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }, */
                // 深度监视 监视多级结构某个属性变化 注意带引号
                /* 'numbers.a':{
                    handler(){
                        console.log('a被改变了');
                    }
                }, */
                // 监听多级结构所有属性的变化
                numbers: {
                    // 深度监视  不开启的话只监视numbers变化 不能看到numbers内部数据的变化
                    deep: true,
                    handler() {
                        console.log('numbers变化了');
                    }
                }

            }
        });
        // 方法二
        /* vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }
        }) */
        // 简写
        vm.$watch('isHot', function (newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
        })
    </script>
</body>

</html>